<script setup lang="ts">/**
 * @see {@link https://vuejs.org/api/sfc-script-setup.html#defineoptions}
 */
import lodash from "lodash-es";
import moment from "moment"

defineOptions({
	name: "FundsDailyReport",
	inheritAttrs: false,
});
import {
	getFinanceReportList,
} from "@/api/financeReport";
import {getByStoreKey} from "@/api/store";

const queryFormRef = ref(ElForm); // 查询表单

const loading = ref(false);
const ids = ref([]);
const total = ref(0);
const monthValue = ref('')
const storeList = ref<[]>([])
const dateList = ref<[]>([])

const queryParams = reactive<any>({
	pageNum: 1,
	pageSize: 20,
});
const dataList = ref<[]>([]);



/**
 * 查询
 */
function handleQuery() {
	loading.value = true
	if (lodash.size(dateList.value) > 0){
		lodash.set(queryParams, 'startDate', dateList.value[0])
		lodash.set(queryParams, 'endDate', dateList.value[1])
	}else{
		queryParams.startDate = ''
		queryParams.endDate = ''
	}
	getFinanceReportList(queryParams).then((response) => {
		dataList.value = response.data
		loading.value = false
	})
}

/** 重置查询 */
function resetQuery() {
	queryParams.pageNum = 1;
	handleQuery();
}

function getStoreList() {
	queryParams.storeId = null
	getByStoreKey(queryParams.platformKey).then((response) => {
		storeList.value = response.data
	})
}

function initDate() {
	let day = new Date().getDate()
	if (day < 2) {
		dateList.value.push(moment().subtract(1, 'months').format('YYYY-MM') + '-01')
		dateList.value.push(moment().subtract(1, 'days').format('YYYY-MM-DD'))
	}else{
		dateList.value.push(moment().format('YYYY-MM') + '-01')
		dateList.value.push(moment().subtract(1, 'days').format('YYYY-MM-DD'))
	}
}

onMounted(() => {
	initDate()
	handleQuery(); // 初始化标准账单配置列表数据
});
</script>

<template>
	<div class="app-container">
		<el-row :gutter="20">
			<el-col>
				<div class="search-container">
				  <el-form ref="queryFormRef" :model="queryParams" :inline="true">
					<el-form-item label="平台" prop="platformKey">
						<dictionary v-model="queryParams.platformKey" type-code="platform" clearable @change="getStoreList"/>
					</el-form-item>
					<el-form-item label="店铺" prop="storeId">
						<el-select class="yz-el-select" v-model="queryParams.storeId" clearable placeholder="请选择">
							<el-option
								v-for="item in storeList"
								:key="item.id"
								:label="item.commercePlatformStoreName"
								:value="item.id"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="查询日期">
						<el-date-picker
							style="width: 250px"
							v-model="dateList"
							type="daterange"
							:clearable="false"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							value-format="YYYY-MM-DD"
						/>
					</el-form-item>
					<el-form-item>
					  <el-button type="primary" @click="resetQuery"
						><i-ep-search />搜索</el-button
					  >
					  <el-button @click="resetQuery">
						<i-ep-refresh />
						重置</el-button
					  >
					</el-form-item>
				  </el-form>
				</div>

				<el-card shadow="never">

					<el-table
							size="small"
							:height="dataList && dataList.length > 0 ? 690 : 150"
							:header-row-style="{color: 'dimgray'}"
							v-loading="loading"
							:data="dataList"
							border
					>
						<el-table-column
								label="平台"
								align="center" show-overflow-tooltip
								prop="platformName"
								width="80"
						/>
						<el-table-column
								label="店铺"
								align="center" show-overflow-tooltip
								prop="storeName"
						/>
						<el-table-column
								label="平台余额"
								width="100"
								align="center" show-overflow-tooltip
						>
							<template #default="scope">
								<format-money :value="scope.row.balanceAmount"></format-money>
							</template>
						</el-table-column>
						<el-table-column
								label="累计提现"
								width="100"
								align="center" show-overflow-tooltip
						>
							<template #default="scope">
								<format-money :value="scope.row.cashAmount"></format-money>
							</template>
						</el-table-column>
						<el-table-column
								label="截止日期当天收入"
								width="120"
								align="center" show-overflow-tooltip
						>
							<template #default="scope">
								<format-money :value="scope.row.lastReceiveAmount"></format-money>
							</template>
						</el-table-column>
						<el-table-column
								label="累计收入"
								width="100"
								align="center" show-overflow-tooltip
						>
							<template #default="scope">
								<format-money :value="scope.row.totalReceiveAmount"></format-money>
							</template>
						</el-table-column>
						<el-table-column
								label="截止日期当天支出"
								width="120"
								align="center" show-overflow-tooltip
						>
							<template #default="scope">
								<format-money :value="scope.row.lastPayAmount"></format-money>
							</template>
						</el-table-column>
						<el-table-column label="截止日期当天支出其中" align="center">
							<el-table-column
								label="退款"
								width="100"
								align="center" show-overflow-tooltip
							>
								<template #default="scope">
									<format-money :value="scope.row.lastRefundAmount"></format-money>
								</template>
							</el-table-column>
							<el-table-column
								label="佣金"
								width="100"
								align="center" show-overflow-tooltip
							>
								<template #default="scope">
									<format-money :value="scope.row.lastCommission"></format-money>
								</template>
							</el-table-column>
							<el-table-column
								label="预充值"
								width="100"
								align="center" show-overflow-tooltip
							>
								<template #default="scope">
									<format-money :value="scope.row.lastCharge"></format-money>
								</template>
							</el-table-column>
							<el-table-column
								label="其他费用"
								width="100"
								align="center" show-overflow-tooltip
							>
								<template #default="scope">
									<format-money :value="scope.row.lastOtherFee"></format-money>
								</template>
							</el-table-column>
						</el-table-column>
						<el-table-column
							label="累计支出"
							width="100"
							align="center" show-overflow-tooltip
						>
							<template #default="scope">
								<format-money :value="scope.row.totalPayAmount"></format-money>
							</template>
						</el-table-column>
						<el-table-column label="累计支出其中" align="center">
							<el-table-column
								label="退款"
								width="100"
								align="center" show-overflow-tooltip
							>
								<template #default="scope">
									<format-money :value="scope.row.totalRefundAmount"></format-money>
								</template>
							</el-table-column>
							<el-table-column
								label="佣金"
								width="100"
								align="center" show-overflow-tooltip
							>
								<template #default="scope">
									<format-money :value="scope.row.totalCommission"></format-money>
								</template>
							</el-table-column>
							<el-table-column
								label="预充值"
								width="100"
								align="center" show-overflow-tooltip
							>
								<template #default="scope">
									<format-money :value="scope.row.totalCharge"></format-money>
								</template>
							</el-table-column>
							<el-table-column
								label="其他费用"
								width="100"
								align="center" show-overflow-tooltip
							>
								<template #default="scope">
									<format-money :value="scope.row.totalOtherFee"></format-money>
								</template>
							</el-table-column>
						</el-table-column>
					</el-table>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
